<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抽奖--九宫格</title>
</head>

<body>
  <div id="my-lucky"></div>

  <script src="https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.11"></script>
  <script>
    const myLucky = new LuckyCanvas.LuckyGrid('#my-lucky', {
      width: '300px',
      height: '300px',
      rows: 4,// 设置布局有几行
      cols: 4,
      blocks: [
        { padding: '10px', background: '#617df2', borderRadius: '10px' },
        { padding: '40px', background: '#e9e8fe', borderRadius: Infinity },
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#afc8ff' },
      ],
      prizes: [ // 相对坐标0-3（x,y）
        { x: 0, y: 0, borderRadius: '0px', fonts: [{ text: '设置文字超出3行自动隐藏', top: 10, lineClamp: 2 }], },
        { x: 1, y: 0, borderRadius: '15px', fonts: [{ text: '需要\n手动换行', wordWrap: false }] },
        { x: 2, y: 0, borderRadius: Infinity, fonts: [{ text: '3', top: '20%' }] },
        { x: 3, y: 0, borderRadius: '15px', fonts: [{ text: '4', top: '20%' }] },
        { x: 3, y: 1, borderRadius: '0px', fonts: [{ text: '5', top: '20%' }] },
        { x: 0, y: 2, borderRadius: '15px', fonts: [{ text: '6', top: '20%' }] },
        { x: 1, y: 3, borderRadius: Infinity, fonts: [{ text: '7' }] },
        { x: 0, y: 3, borderRadius: '15px', fonts: [{ text: '8', top: '25%' }] },
      ],
      activeStyle: {
        fontColor: '#f9bdbd',
        background: '#9c9cdd'
      },
      defaultStyle: {
        background: 'yellow'
      },
      buttons: [
        {
          x: 1, y: 1.5,
          background: 'red',
          col: 2,
          row: 1,
          fonts: [{ text: '开始', top: '25%' }],
          callback: function () {
            console.log('1')
          }
        },
        {
          x: 2.5, y: 2.5,
          col: 2,
          background: '#7f95d1',
          fonts: [{ text: '十连抽', top: '25%' }],
          callback: function () {
            console.log('10')
          }
        },
      ],
      defaultConfig: {
        gutter: '5px',  // 奖品间隙
        speed: 10, // 最大速度
        accelerationTime: 1000,
        // decelerationTime: 2000
      },
      start: function () {
        console.log('start', new Date().getSeconds())
        myLucky.play()
        // 假设接口的请求速度是1s
        setTimeout(_ => {
          myLucky.stop(3)
        }, 3000)
      },
      end: function (prize, tt) {
        console.log('end', new Date().getSeconds(), prize, tt)
        alert('恭喜中奖: ' + prize.fonts[0].text)
        myLucky.init();
      }
    })
  </script>
</body>

</html>